<template>
	<div class="pub-tree-list-page">
		<div class="pub-tree-page">
			<div class="pub-tree-page-left">
				<div class="tree-page-left-header font-14-bold">{{ props.treeTitle }}</div>

				<div class="tree-container">
					<slot name="Slot-Tree" extra="tree的Slot插槽"></slot>
				</div>
			</div>

			<div>
				<div class="page-list-region" :style="{ marginBottom: `${paddingBottom}px` }">
					<slot name="Slot-Table" extra="列表区域插槽"></slot>
				</div>
				<div ref="refPaginationGroup" class="default-list-page-pagination-group">
					<slot name="Slot-Pagination" extra="分页器插槽"></slot>
				</div>
				<div class="bacth-operation">
					<slot name="Solt-Table-Batch-Operation" extra="列表勾选信息浮窗的区域"></slot>
				</div>
			</div>
		</div>
	</div>
</template>

<script setup lang="ts" name="pub-tree-list-page">
import { ref, onMounted } from 'vue';

const props = defineProps({
	treeTitle: { type: String, default: '组织架构名称' },
	pageTitle: { type: String, default: '页面标题' }
});

const refPaginationGroup = ref(null);

const paddingBottom = ref(0);

onMounted(() => {
	let observer = new ResizeObserver((entries) => {
		paddingBottom.value = (entries[0].target as HTMLDivElement).offsetHeight + 24;
	});
	observer.observe(refPaginationGroup.value!);
});
</script>

<style lang="less">
.pub-tree-list-page {
	// overflow: hidden;
	// overflow-y: scroll;
	min-width: 1200px;

	.ant-table {
		overflow-y: scroll;
		height: 550px;
	}

	.bread-crumb-title {
		color: rgba(240, 246, 252, 0.95);
	}

	.pub-tree-page {
		display: flex;
	}

	.pub-tree-page-left {
		width: 264px;
		// height: 100%;
		color: @text02;
		// border-right: 1px solid #e8e8eb;
		// background-color: @white;

		.tree-page-left-header {
			height: 38px;
			padding: 4px 16px;
			line-height: 30px;
		}

		.tree-container {
			// overflow-y: auto;
			// height: calc(100% - 38px);
			padding: 8px 12px 24px;
		}
	}

	.page-action-region {
		padding: 28px 0 24px;

		.basic-region {
			display: flex;
			justify-content: space-between;

			.basic-region-left {
				display: grid;
				grid-auto-flow: column;
				grid-column-gap: 10px;
				align-items: center;
			}

			.basic-region-right {
				display: grid;
				grid-auto-flow: column;
				grid-column-gap: 8px;
				direction: rtl; // 用来设置文本、表列水平溢出的方向。 rtl 表示从右到左， ltr 表示从左到右

				// button {
				// 	margin-left: 16px;
				// }
			}
		}

		.page-list-region {
			overflow-y: scroll;
		}

		.default-list-page-pagination-group {
			position: fixed;
			bottom: 24px;
			z-index: 13;
			width: var(--content-width-table);
		}
	}

	.bacth-operation {
		position: absolute;
		bottom: 23px;
		width: calc(100% - var(--side-width) - 264px - 64px);
	}
}
</style>

<style lang="less">
.pub-tree-list-page {
	.pub-page-expand-action {
		background-color: rgba(243, 243, 245, 0.4) !important;
	}
}
</style>
